<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../EaselJS/lib/easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="350" height="200">
    easeljs简单使用
</canvas>
<script type="text/javascript">
    /*Javascript代码片段*/
    window.onload=function(){
        //获取stage
        var canvas = document.getElementById("myCanvas");
        var stage = new createjs.Stage(canvas);
        function circle(){
            //生成圆形
            var circle = new createjs.Shape();
            circle.graphics
                .setStrokeStyle(5) //描边的宽度
                .beginStroke("rgba(0,0,0,0.9)") //描边的颜色
                .beginFill("red") //背景颜色
                .drawCircle(0, 0, 50); //位置和半径
            circle.x = 55; //位置X
            circle.y = 100; //位置Y
            //将生成图形添加到stage中，并且调用update方法更新
            stage.addChild(circle);
        }
        function rect(){
            //生成矩形
            this.x = 120;
            var rect = new createjs.Shape();
            rect.graphics
                .beginFill("orange") //颜色
                .drawRect(10, 10, 100, 100);  //x, y, w, h
            rect.x = this.x;
            rect.y = 40;
            //将生成图形添加到stage中，并且调用update方法更新
            stage.addChild(rect);
        }
        function polystar(){
            //生成多角形
            var polystar = new createjs.Shape();
            polystar.graphics
                .setStrokeStyle(5) //描边的宽度
                .beginStroke("orange") //背景颜色
                .drawPolyStar(290,100,5,10,10,110); //x, y, radius, sides, pointSize, angle

            stage.addChild(polystar);
        }

        circle();
        rect();
        polystar();

        createjs.Ticker.addEventListener("tick", handleTicker);
        function handleTicker(){
            stage.update();
        }
    }
</script>
</body>
</html>